<template>
	<div id="state-legend" class="legend">
		<div v-for="(item, index) in colors" :key="index">
			<span class="color" :style="{ backgroundColor: item.color }"> </span><span class="text">{{ item.value }}</span>
		</div>
	</div>
</template>
<script>
export default {
	props: {
		colors: {
			type: Array,
			default() {
				return [
					{ color: "#FF2711", value: "80-100" },
					{ color: "#F08200", value: "60-80" },
					{ color: "#00C9A6", value: "40-60" },
					{ color: "#00ADED", value: "20-40" },
					{ color: "#3D6FFF", value: "0-20" }
				];
			}
		}
	}
};
</script>
<style scoped>
.legend {
	/* background-color: #fff; */
	bottom: 146px; /*no*/
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /*no*/
	padding: 10px; /*no*/
	position: absolute;
	right: 544px; /*no*/
	z-index: 1;
}

.legend h4 {
	margin: 0 0 10px; /*no*/
}
.legend div {
	height: 16px; /*no*/
	line-height: 16px; /*no*/
	font-size: 14px; /*no*/
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #ffffff;
}

.legend div span {
	display: inline-block;
	height: 16px; /*no*/
	line-height: 16px; /*no*/
	vertical-align: middle;
}
.color {
	margin-right: 11px; /*no*/
	width: 14px; /*no*/
}
</style>
